<template>
	<view class="all">
		<form @submit="formSubmit" >
		<view class="mid">
			<view class="midone">真实姓名:</view>
			<view class="midone_r"><input name="username" :value="information.username" disabled="true"/></view>
		</view>
		<view class="br1"></view>
		<view class="mid">
			<view class="midone">出生年月:</view>
			<view class="midone_r"><input name = "birth_date" :value="information.birth_date" /></view>
		</view>
		<view class="br1"></view>
		<view class="mid">
			<view class="midone">身份证号:</view>
			<view class="midone_r"><input name = "id_card_no" :value="information.id_card_no" /></view>
		</view>
		<view class="mid">
			<view class="midone">联系电话:</view>
			<view class="midone_r"><input name = "phone" :value="information.phone" /></view>
		</view>
		<view class="br2"></view>
		<view class="mid">
			<view class="midone">从事行业:</view>
			<view class="midone_r"><input name = "industry" :value="information.industry" /></view>
		</view>
		<view class="br1"></view>
		<view class="mid">
			<view class="midone">工作单位:</view>
			<view class="midone_r"><input name = "work_unit" :value="information.work_unit" /></view>
		</view>
		<view class="br2"></view>
		<view class="mid">
			<view class="midone">职称:</view>
			<view class="midone_r"><input name="postitional" :value="information.postitional" /></view>
		</view>
				<view class="br1"></view>
		<view class="mid">
			<view class="midone">职务:</view>
			<view class="midone_r"><input name = "job" :value="information.job" /></view>
		</view>
		<view class="br1"></view>
		<view class="mid">
			<view class="midone">简介:</view>
			<view class="midone_r"><input name="brief" :value="information.brief" /></view>
		</view>
		<view class="br2"></view>
		<view class="x">
			<button form-type="submit" class="bc">保存</button>
		</view>
		</form>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				information: null
			}
		},
		computed: {
			...mapState(['userId', 'openid', 'token', 'wxNickName'])
		},
		onLoad(option) {
			let that = this;
			var params = {
				url: "users/getInformation",
				type: 'POST',
				data: {
					openid: that.openid,
					type: that.wxNickName
				},
				sCallback: function(res) {
					console.log(res);
					that.information = res;
				}
			}
			app.request(params);
		},
		methods: {
			//日期转换方法
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				return y + '年';
			},
			// 提交表单信息
			formSubmit: function(e) {
				let that = this;
				let data = e.detail.value;
				let params = {
					url: "users/setInformation",
					type: 'POST',
					data: {							
						userId: that.userId,
						type: that.wxNickName,
						birth_date: data.birth_date,
						id_card_no: data.id_card_no,
						postitional: data.postitional,
						industry: data.industry,
						job: data.job,
						brief: data.brief
					},
					sCallback: function(res) {
						console.log(res);
						if (res == "OK"){
							uni.showToast({
								title: '信息修改成功',
								icon: 'none',
								type: 'warning'
							})							
						}						 
					}
				}
				app.request(params);
			}
		}
	}
</script>

<style>
.all{
	background-color: #FFFFFF;
}
.top {
	height: 150rpx;
	line-height: 150rpx;
	border-bottom: 1rpx solid #F1F1F1;
}
.topone {
	width: 20%;
	margin-left: 30rpx;
}
.topthree {
	margin-top: -90rpx;
	margin-left: 705rpx;
}
.image {
	margin-left: 580rpx;
	margin-top: -100rpx;
}
.imag {
	/* margin-left: 700rpx; */
	/* margin-top: -600rpx; */
}
.mid {
	/* background-color: #F0AD4E; */
	height: 60rpx;
	/* border-bottom: 1rpx solid #F1F1F1; */
}
.midone {
	/* background-color: #2C405A; */
	width: 40%;
	font-size: 30rpx;
	margin-top: 30rpx;
	margin-left: 30rpx;
}
.midone_r {
	/* background-color:  #4CD964; */
	margin-top: -40rpx;
	text-align: right;
	margin-right: 50rpx;
	color: #D2D2D2;
}
.midone_r input{
	font-size: 30rpx;
}
.midone_TP{
	margin-top: -50rpx;
	text-align: right;
	margin-right: 50rpx;
}
.mid_two {
	/* background-color: #F0AD4E; */
	height: 280rpx;
	/* border-bottom: 1rpx solid #bbbbbb; */
}
.midtwo {
	/* background-color: #2C405A; */
	width: 40%;
	margin-top: 40rpx;
	margin-left: 30rpx;
}
.midtwo_r {
	/* background-color:  #4CD964; */
	margin-top: 30rpx;
	text-align: left;
	margin-left: 30rpx;
}
.bc{
		color: #FFFFFF;
		font-size: 28rpx;
		margin-top: 50rpx;
		width: 600rpx;
		background-color: #255BBA;
	}
.br1 {
		width: 100%;
		height: 3rpx;
		background-color: #F4F5F6;
		margin-left: 30rpx;
	}	
.br2 {
		width: 100%;
		height: 30rpx;
		background-color: #F5F5F5;
	}
</style>
